<template>
	<!-- 查看当前待办任务 -->
	<div class="content">
		<!-- 表格table -->
		<div class="table">
			<el-table :data="tableData" ref="multipleTable" stripe>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="customerRoomApp.customerRoomAppCreateTime" label="提交时间" align="center"></el-table-column>
				<el-table-column prop="customerRoomApp.customerRoomAppApprover" label="预约发起人" align="center"></el-table-column>
				<el-table-column prop="customerRoomApp.customerRoomAppName" label="场馆名称" align="center"></el-table-column>
				<el-table-column prop="customerRoomApp.customerRoomAppDate" label="预约日期" align="center"></el-table-column>
				<el-table-column prop="customerRoomApp.customerRoomAppTimeScope" label="预约时间范围" align="center"></el-table-column>
				<el-table-column prop="customerRoomApp.customerRoomAppRemark" label="备注" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button
							:plain="true"
							@click="handleClickAdopt(scope.$index, scope.row)"
							type="text"
							size="small"
						>通过</el-button>
						<el-button
							:plain="true"
							@click="handleClickRefuse(scope.$index, scope.row)"
							type="text"
							size="small"
						>拒绝</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页pagination -->
		<div class="pagination">
			<el-pagination
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page.currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { appoinmentTasksListTodo, appoinmentTasksComPlete } from '@/APIs/index/index'
export default {
	inject: ['reload'], // 注入依赖
	name: 'CheckAgent',
	data() {
		return {
			list: [],
			tableData: [],
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			venuesDetailsList: []
		}
	},
	created() {},
	mounted() {
		this.checkAgent()
	},
	methods: {
		// 点击通过预约请求
		async handleClickAdopt(index, row) {
			this.$message({
				message: '请求已通过',
				type: 'success'
			})
			const taskId = row.taskId
			const agree = '2'
			console.log(taskId, agree)
			const data = await appoinmentTasksComPlete({
				taskId,
				agree
			})
			console.log(data)
			// 刷新当前页面
			this.reload()
			this.$router.go(0)
		},
		// 点击拒绝预约请求
		async handleClickRefuse(index, row) {
			this.$message({
				message: '请求已拒绝',
				type: 'success'
			})
			const taskId = row.taskId
			const agree = '3'
			console.log(taskId, agree)
			const data = await appoinmentTasksComPlete({
				taskId,
				agree
			})
			console.log(data)
			// 刷新当前页面
			this.reload()
			this.$router.go(0)
		},
		// 渲染数据到表格
		async checkAgent() {
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await appoinmentTasksListTodo({
				pageNum,
				pageSize
			})
			this.tableData = list.map(item => ({ ...item, visible: false }))
			this.venuesDetailsList = list
			this.page.total = total
			console.log(list, total)
		},
		// 点击下一页
		async handleCurrentChange(val) {
			this.page.currentPage = val
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await appoinmentTasksListTodo({
				pageNum,
				pageSize
			})
			this.tableData = list.map(item => ({ ...item, visible: false }))
			this.venuesDetailsList = list
			this.page.total = total
			console.log(list, total)
		},
		handleSizeChange() {}
	}
}
</script>

<style>
.table {
	margin-bottom: 15px;
}
</style>